<template>
  <div style="width: 300px; background-color:#F2F6FC; height: 450px;">
    <div style="height:166px; background-color:#333744"></div>
    <el-avatar shape="circle" :size="100" :src="cicleUrl"></el-avatar>
    <div class="personinfo">
      <div>{{ user.name }}</div>
      <div>{{ user.teacherId }}</div>
      <div>所属院系：{{ user.departmentName }}</div>
      <div>职称：{{ user.academicTitle }}</div>
      <el-button @click="modifyInfo" disabled>修改个人信息</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "教师1",
        teacherId: "1542762",
        departmentName: "软件学院",
        academicTitle: "讲师",
      },
      cicleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },
  methods: {
    //加载教师信息
    loadTeacherInfo() {
      let options = {
        teacherId: this.$store.state.id,
        name: null,
        departmentId: null,
        academicTitle: null,
      };
      this.$http.post(this.$api.TeacherSearchInfo, options).then((resp) => {
        if (resp.success) {
          this.user = resp.data[0];
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },

    modifyInfo() {
      if (this.$route.path === "/teacher/changeInfo") {
        console.log("已经在这个页面啦，不需要跳转了哦");
      } else {
        this.$router.replace({
          path: "/teacher/changeInfo",
        });
        console.log("好滴，我跳转啦");
      }
    },
  },
  mounted() {
    this.loadTeacherInfo();
  },
};
</script>

<style lang="less" scoped>
.el-avatar {
  position: relative;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  margin-top: -75px;
}

.personinfo {
  text-align: center;
  margin-top: 10px;
}

.personinfo div:nth-child(1) {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  text-decoration: none;
  color: #666666;
  font-size: 18px;
}

.personinfo div:nth-child(2) {
  margin-top: 10px;
  font-family: "微软雅黑";
  font-weight: 400;
  text-decoration: none;
  color: #999999;
  font-size: 13px;
}

.personinfo div:nth-child(3) {
  margin-top: 30px;
}
.personinfo div:nth-child(n + 3) {
  font-family: "微软雅黑";
  color: #666666;
  font-weight: 400;
  font-size: 14px;
}

.personinfo div:nth-child(4) {
  margin-top: 10px;
}

.el-button {
  background-color: #23384f;
  margin-top: 20px;
  width: 130px;
  height: 40px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  margin-left: 0px;
}

.el-button :hover {
  color: #5baaf4;
}

.el-button :active {
  color: #5baaf4;
}
</style>
